import {Callout, Tabs} from 'nextra/components';
import { Widget } from '@/components/demo/widget.tsx';
import LinkBadge from '@/components/ui/link-badge/link-badge.tsx';
import LinkBadgeGroup from '@/components/ui/link-badge/link-badge-group.tsx';

# Radio

A radio button that typically allows the user to choose only one of a predefined set of options.

<LinkBadgeGroup>
    <LinkBadge label="API Reference" href="https://pub.dev/documentation/forui/latest/forui.widgets.radio/"/>
</LinkBadgeGroup>

<div className="pb-5">
    <Callout type="info">
        We recommend using a [select group](/docs/form/select-group#radio-form) to create a group of radio buttons instead of using `FRadio` directly.
    </Callout>
</div>

<Tabs items={['Preview', 'Code']}>
  <Tabs.Tab>
    <Widget name='radio' variant='default' query={{}}/>
  </Tabs.Tab>
  <Tabs.Tab>
    ```dart copy
    FRadio(
      label: const Text('Default'),
      description: const Text('The description of the default option.'),
      error: const Text('Please select the default option.'),
      semanticsLabel: 'Default',
      value: true,
      onChange: (value) {},
      enabled: true,
      autofocus: true,
    );
    ```
  </Tabs.Tab>
</Tabs>

## CLI

To generate and customize this style:

```shell copy
dart run forui style create radio
```

## Usage

### `FRadio(...)`

```dart copy
FRadio(
  style: FRadioStyle(...),
  label: const Text('Default'),
  description: const Text('The description of the default option.'),
  error: const Text('Please select the default option.'),
  semanticsLabel: 'Default',
  value: true,
  onChange: (value) {},
  enabled: true,
  autofocus: true,
);
```
